<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/10/25
  Time: 9:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <%--查询按钮--%>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="分店信息">
            <el-select clearable v-model="formInline.branchid" placeholder="活动区域">
                <el-option v-for="item in branchList" :label="item.branchname" :value="item.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>&nbsp;&nbsp;查询</el-button>
        </el-form-item>
    </el-form>
    <%--批量出库按钮--%>
    <el-button type="primary" @click="measured"><i class="el-icon-s-operation"></i>&nbsp;&nbsp;批量出库</el-button>
    <%--平调出库按钮--%>
    <el-button type="success" @click="flattened"><i class="el-icon-sort"></i>&nbsp;&nbsp;平调出库</el-button>
    <%--刷新按钮--%>
    <el-button type="info" @click="refresh"><i class="el-icon-refresh"></i>&nbsp;&nbsp;刷新</el-button>
    <%--用表格显示商品信息--%>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                height="500"
                border
        <%--获取选择框对应的内容--%>
                ref="multipleTable"
                @selection-change="handleSelectionChange">
            <el-table-column

            <%-- 多选框 --%>
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="goodsname"
                    label="商品名称"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="商品图片"
                    width="150px">
                <template slot-scope="scope">
                    <img :src="scope.row.url" width="100px" height="100px">
                </template>
            </el-table-column>
            <el-table-column
                    prop="layout"
                    label="键盘布局"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="keycapname"
                    label="键帽材质"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="keyboardcolorname"
                    label="键盘颜色"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="shafttype"
                    label="轴体类型"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="shaftchoosename"
                    label="轴体选择"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="interfacetype"
                    label="接口类型"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="backlightcolorname"
                    label="背光颜色"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="店铺名称"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="cprice"
                    label="商品进价"
                    width="150px">
            </el-table-column>
            <el-table-column
                    prop="sprice"
                    label="商品售价"
                    width="150px">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    prop="counts"
                    label="商品数量"
                    width="150px">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="出库数量"
                    width="150px">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.chuku" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150px">
                <template slot-scope="scope">
                    <el-button type="warning" @click="retail(scope.row)" round>零售</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <%--分页功能--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <%--平调出库对话框--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="formFlattened" :model="formFlattened" label-width="80px">
            <el-form-item label="分店信息">
                <el-select clearable v-model="formFlattened.branchid" placeholder="请选择平调后的分店">
                    <el-option v-for="item in branchList02" v-if="item.branchname!=userbranchname" :label="item.branchname" :value="item.branchid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="okFlattened">确 定</el-button>
  </span>
    </el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            userbranchname: undefined,//当前登录者的分店名称
            tableData: undefined,// 表格数据
            currentPage: 1,// 当前页码
            pageSize: 5,// 每页显示的条数
            total: 0,// 总条数
            formInline: {},// 查询条件
            branchList: [],// 分店列表
            retailData: {},// 零售数据
            selectedRows: [],// 选中的行数据

            dialogVisible: false,// 对话框是否可见
            formFlattened: {},// 平调出库表单数据
            FlattenedBranchId: undefined,// 平调后的分店id
            branchList02: []// 平调分店列表
        },
        created() {
            this.getAllGoods();
            this.getBranchList();
            this.getBranchList02();
            this.getUserBranchName();
        },
        methods: {
            //表格中行的样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },
            //查询当前登录者的分店名称
            getUserBranchName() {
                axios.get("/branch/getUserBranchName").then(res => {
                    if (res.data.code === 200) {
                        this.userbranchname = res.data.data;
                    }
                })
            },
            //查询所有商品信息
            getAllGoods() {
                axios.post("/goods/getAllOutGoods?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.formInline).then(res => {
                    if (res.data.code === 200) {
                        this.tableData = res.data.data.list;
                        this.total = res.data.data.total;
                    }
                })
            },
            // 改变每页显示的条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.getAllGoods();
            },
            // 改变页码
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getAllGoods();
            },
            //查询所有的店铺名字
            getBranchList() {
                axios.get("/branch/getBranchName").then(res => {
                    if (res.data.code === 200) {
                        this.branchList = res.data.data;
                    }
                })
            },
            getBranchList02(){
                axios.get("/branch/getBranchName02").then(res => {
                    if (res.data.code === 200) {
                        this.branchList02 = res.data.data;
                    }
                })
            },
            //点击查询
            onSubmit() {
                this.getAllGoods();
            },
            //点击刷新按钮 重新加载数据并且返回到第一页
            refresh() {
                this.currentPage = 1;
                this.getAllGoods();
                this.$message({
                    message: '刷新成功',
                    type: 'success'
                });
            },
            //点击零售按钮
            retail(row) {
                //判断输入的是否为数字
                if (isNaN(row.chuku)) {
                    this.$message({
                        message: '输入的数量必须为数字',
                        type: 'warning'
                    });
                    return;
                }
                //判断输入的数字是否为整型
                if (row.chuku % 1 !== 0) {
                    this.$message({
                        message: '输入的数量必须为整数',
                        type: 'warning'
                    });
                    return;
                }
                //如果输入的数量大于库存数量
                else if (row.chuku > row.counts) {
                    this.$message({
                        message: '输入的数量大于库存数量',
                        type: 'warning'
                    });
                    return;
                }
                // 如果输入的数量小于等于0
                else if (row.chuku <= 0) {
                    this.$message({
                        message: '输入的数量必须大于0',
                        type: 'warning'
                    });
                    return;
                }
                //如果输入的数量大于5,则提示请进行批量出库
                else if (row.chuku > 5) {
                    this.$message({
                        message: '请进行批量出库',
                        type: 'warning'
                    });
                    return;
                }
                // 如果输入的数量小于等于5，进行零售操作
                else {
                    //用该行的counts减去输入的数量得到新的counts
                    newcounts = row.counts - row.chuku;
                    // 封装 retailData,将新的数量和id封装到retailData中
                    this.retailData.num = row.chuku;
                    this.retailData.counts = newcounts; // 新库存数量
                    this.retailData.id = row.id; //该行的id
                    this.retailData.goodsid = row.goodsid;// 该行的商品id
                    this.retailData.sprice = row.sprice;
                    axios.put("/addOut/retail", this.retailData).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: '零售成功',
                                type: 'success'
                            });
                            this.getAllGoods();
                            //在零售审核成功后，对出库信息进行添加操作
                            axios.post("/outLibraryInformation/addOutLibraryInformation", this.retailData).then(res => {
                                this.$message({
                                    message: '出库信息添加成功',
                                    type: 'success'
                                })
                            })

                        } else {
                            this.$message({
                                message: '零售失败,权限不够',
                                type: 'warning'
                            });
                        }
                    })
                }
            },
            //获取选中的行
            handleSelectionChange(val) {
                this.selectedRows = val;
            },
            //批量出库按钮
            measured() {

                // 判断是否选择了行
                if (this.selectedRows.length === 0) {
                    this.$message({
                        message: '请选择要出库的商品',
                        type: 'warning'
                    });
                    return;
                }
                //判断输入的是否为数字
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (isNaN(this.selectedRows[i].chuku)) {
                        this.$message({
                            message: '输入的数量必须为数字',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //判断输入的数字是否为整型
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (this.selectedRows[i].chuku % 1 !== 0) {
                        this.$message({
                            message: '输入的数量必须为整数',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //如果输入的数量大于库存数量
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (this.selectedRows[i].chuku > this.selectedRows[i].counts) {
                        this.$message({
                            message: '输入的数量大于库存数量',
                            type: 'warning'
                        });
                        return;
                    }
                }
                // 如果输入的数量小于等于0
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (this.selectedRows[i].chuku <= 0) {
                        this.$message({
                            message: '输入的数量必须大于0',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //判断当前登录者的店铺name与选择的店铺name是否一致
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (this.userbranchname != this.selectedRows[i].branchname) {
                        this.$message({
                            message: '只能对本店铺的商品进行出库操作',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //判断是否有未完成审核的订单
                axios.get("/outLibraryEx/yesOrNo").then(res => {
                    //判断是否有未完成审核的订单
                    if (res.data.code === 500) {
                        this.$message({
                            message: '请先完成未完成的审核订单',
                            type: 'warning'
                        });
                        return;
                    }

                    //进行批量出库
                    axios.post("/addOut/measured", this.selectedRows).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: '批量出库成功',
                                type: 'success'
                            })
                        }
                    })
                })

            },
            //对话框的关闭
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //平调出库
            flattened() {
                // 判断是否选择了行
                if (this.selectedRows.length === 0) {
                    this.$message({
                        message: '请选择要出库的商品',
                        type: 'warning'
                    });
                    return;
                }
                //判断输入的是否为数字
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (isNaN(this.selectedRows[i].chuku)) {
                        this.$message({
                            message: '输入的数量必须为数字',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //判断输入的数字是否为整型
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (this.selectedRows[i].chuku % 1 !== 0) {
                        this.$message({
                            message: '输入的数量必须为整数',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //如果输入的数量大于库存数量
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (this.selectedRows[i].chuku > this.selectedRows[i].counts) {
                        this.$message({
                            message: '输入的数量大于库存数量',
                            type: 'warning'
                        });
                        return;
                    }
                }
                // 如果输入的数量小于等于0
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (this.selectedRows[i].chuku <= 0) {
                        this.$message({
                            message: '输入的数量必须大于0',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //判断当前登录者的店铺name与选择的店铺name是否一致
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if (this.userbranchname != this.selectedRows[i].branchname) {
                        this.$message({
                            message: '只能对本店铺的商品进行出库操作',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //是否确定
                this.$confirm('是否确定平调出库？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible=true;
                })
            },
            //确认平调出库
            okFlattened(){
                this.FlattenedBranchId = this.formFlattened.branchid;
                axios.put("/transferEx/flattened?FlattenedBranchId="+this.FlattenedBranchId, this.selectedRows).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '平调出库成功',
                            type: 'success'
                        })
                    }
                    this.dialogVisible=false;
                })
            },
        }
    })
</script>
</html>
